<template>
  <div class="duplicates-tab">
    <el-card class="duplicates-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon><Warning /></el-icon>
          <span>重复日志统计</span>
        </div>
      </template>
      
      <div class="duplicates-content">
        <div v-if="duplicateList.length === 0" class="empty-state">
          <el-empty description="未发现重复日志" />
        </div>
        
        <div v-else class="duplicate-list">
          <el-collapse v-model="activeNames">
            <el-collapse-item 
              v-for="(item, index) in duplicateList" 
              :key="index"
              :name="index"
            >
              <template #title>
                <div class="collapse-title">
                  <span class="location">{{ item.location }}</span>
                  <el-tag type="warning" size="small">重复 {{ item.count }} 次</el-tag>
                </div>
              </template>
              
              <div class="duplicate-content">
                <p class="message">{{ item.message }}</p>
                <div class="occurrences">
                  <h4>出现记录:</h4>
                  <el-table :data="item.occurrences" size="small" stripe>
                    <el-table-column prop="datetime" label="时间" width="180" />
                    <el-table-column prop="component" label="组件" width="120" />
                    <el-table-column prop="level" label="级别" width="80">
                      <template #default="{ row }">
                        <el-tag :type="getLevelType(row.level)" size="small">
                          {{ row.level }}
                        </el-tag>
                      </template>
                    </el-table-column>
                    <el-table-column prop="source_file" label="源文件" />
                  </el-table>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as api from '@/api'

// 状态
const duplicateList = ref<any[]>([])
const activeNames = ref<number[]>([])

// 获取日志级别类型
const getLevelType = (level: string) => {
  switch (level.toLowerCase()) {
    case 'error': return 'danger'
    case 'warning': return 'warning'
    case 'info': return 'info'
    default: return 'info'
  }
}

// 加载重复日志数据
const loadDuplicateData = async () => {
  try {
    const data = await api.getDuplicates()
    if ((data as any).error) {
      console.error('加载重复日志失败:', (data as any).error)
      return
    }
    
    duplicateList.value = Object.entries(data).map(([location, item]: [string, any]) => ({
      location,
      message: item.message,
      count: item.count,
      occurrences: item.occurrences
    }))
    
    // 默认展开前3个
    activeNames.value = [0, 1, 2].filter(i => i < duplicateList.value.length)
  } catch (error) {
    console.error('加载重复日志失败:', error)
  }
}

onMounted(() => {
  loadDuplicateData()
})
</script>

<style scoped>
.duplicates-tab {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.duplicates-card {
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  flex-shrink: 0;
}

.duplicates-card :deep(.el-card__body) {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.duplicates-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.duplicate-list {
  flex: 1;
  overflow-y: auto;
}

.collapse-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.location {
  font-weight: 600;
  color: var(--color-text);
}

.duplicate-content {
  padding: 16px 0;
}

.message {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
  color: var(--color-text);
  font-family: 'Courier New', monospace;
  word-break: break-all;
}

.occurrences h4 {
  margin: 0 0 12px 0;
  color: var(--color-text);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .collapse-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .location {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .duplicates-tab {
    padding: 0;
  }
  
  .message {
    font-size: 12px;
    padding: 8px;
  }
}
</style> 